<template>
  <div id="regional-overview">
    <div class="row row-1"></div>
    <div class="row row-2">
      <div class="declare">
        <p class="ellipsis">区域概况</p>
      </div>
    </div>
    <div class="row row-3">
      <p>
        &emsp;&emsp;石家庄地处河北省中南部，是河北省省会、河北省政治、经济、科技、金融、文化和信息中心。全市下辖8个区、11个县、代管3个县级市，总面积14464平方千米，建成区面积283.72平方千米，常住人口1095.16万人，城镇人口691.7万人。
      </p>
      <p>
        &emsp;&emsp;(一)&ensp;石家庄是中国铁路运输的主要枢纽之一京广、石太、石德、朔黄四条铁路干线交汇于此。
      </p>
      <p>
        &emsp;&emsp;(二)&ensp;石家庄是国家优秀旅游城市，旅游资源丰富，名胜古迹众多，拥有全国重点文物保护单位39处，国家级历史文化名城1座，国家级森林公园3处（仙台山、五岳寨、驼梁山），西柏坡是国家5A级景区。
      </p>
      <p>
        &emsp;&emsp;(三)&ensp;石家庄市域跨太行山地和华北平原两大地貌单元。西部地处太行山中段。东部为滹沱河冲积平原，地势东南低西北高，差距大，地貌复杂。西部太行山地海拔1000米左右，地势高耸。东部平原属太行山山前冲洪积平原，海拔一般30-100米。
      </p>
    </div>
    <div class="row row-4">
      <div class="border">
        <div class="video">
          <video
            id="video"
            class="video-js"
            controls
            preload="auto"
            poster=""
            data-setup="{}"
          >
            <source
              src="../../assets/video/7aa60c111c30c481f90441bdd1ee9a63.mp4"
              type="video/mp4"
            />
          </video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "plyr/dist/plyr.css";
import plyr from "plyr";

export default {
  methods: {
    initVideojs() {
      plyr.setup("#video");
    }
  },
  mounted() {
    this.initVideojs();
  }
};
</script>

<style lang="stylus" scoped>
#regional-overview
    position relative
    width 100%
    height 100%

    > .row-1
        height 80px

    > .row-2
        padding 30px 0

        > .declare
            margin 0 auto

    > .row-3
        padding 30px 0

        > p
            text-align justify
            line-height 42px
            font-size 23px
            color #fff

    > .row-4
        > .border
            position relative
            width 428px
            height 283px
            padding 27px 15px
            margin 0 auto
            background url("../../assets/img/index/videoBac.png") no-repeat top left
            background-size 455px 335px

            > .video
                position relative
                width 420px
                height 280px
</style>
